window.onload=async function(){

 const res= await axios({
   url:'/dashboard'
 })
 console.log(res.data.data)
 
 for (const key in res.data.data.overview) {
    console.log(res.data.data.overview[key])
  document.querySelector(`[name=${key}]`).innerHTML=res.data.data.overview[key]
    console.log(key)
 }
  console.log(res.data)
  const yes=res.data.data.year
console.log(yes)
function seal(yes){
    const myChart = echarts.init(document.getElementById('line'));

    option = {
        // 标题部分的设置
        title: {
          text: '2021全学科薪资走势',
          top:5
          
        },
        // x轴的设置
        xAxis: {
          type: 'category',
          data: yes.map( item =>item.month),
          // x轴线段设置
          axisLine:{
            // 线段的样式
            lineStyle:{
              // 类型 虚线
              type:"dashed",
              // 颜色
              color:"#d3d3d3"
            }
          },
          // x轴文本设置
          axisLabel:{
            // 颜色
            color:'black'
          }
        },
        // y轴的设置
        yAxis: {
          type: 'value',
          // 分割线
          splitLine:{
            // 线的样式
            lineStyle:{
              type:"dashed", // 类型
              // width:20, // 宽度
              color:'deepskyblue'// 颜色
            }
          }
        },
        // 提示框 设置了才会出现
        tooltip:{
          show:true
        },
        series: [
          {
            data: yes.map( item =>item.salary),
            type: 'line',
            smooth: true,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#499FEE',
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(255,255,255,0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(255,255,255,0)',
                  },
                ]),
              },
          }
        ]
      };
    
      myChart.setOption(option);
    
}
//线性统计图
seal(yes)

//圆形统计图
 const salaryData=res.data.data.salaryData
 console.log(salaryData)

 console.log(salaryData.map(item => item.label))
function yuan(salaryData){
    var myChart = echarts.init(document.getElementById('salary'));

    option = {
        title: {
            text: '班级薪资分部',
            top: '2%',
          },

        tooltip: {
          trigger: 'item'
        },
        legend: {
            bottom: '5%',
            left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: salaryData.map(item => {
return {
    value:item.g_count+item.b_count,
    name:item.label
}

            })  
          }
        ]
      };
      myChart.setOption(option);
}
yuan(salaryData)


const groupData=res.data.data.groupData
//统计图

  console.log('结果',groupData)


function zuyuan (groupData) {
    var myChart = echarts.init(document.getElementById('lines'));
    option = {
        // x轴设置
        xAxis: {
          type: 'category',
          data: groupData[1].map(item=>{

              return item.name
          }),
          // 线段设置
          axisLine: {
            // 线的样式
            lineStyle: {
              type: 'dashed',
              color: '#d4d4d6'
            }
          }
        },
        yAxis: {
          type: 'value',
          // 分割线设置
          splitLine: {
            // 线的样式
            lineStyle: {
              type: 'dashed',
              color: '#d4d4d6'
            }
          }
        },
        // 颜色
        color: [
          // 渐变
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#34d29a' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#d4f5ea' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#499fed' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#d8eafb' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        ],
        series: [
          // 柱状图 给多个图形,会有柱形
          {
            data: groupData[1].map(item=>{

                return item.hope_salary
            }),
            type: 'bar'
          },
          {
            data: groupData[1].map(item=>{

                return item.salary
            }),
            type: 'bar'
          }
        ]
      };
      myChart.setOption(option);


      const btn=  document.querySelectorAll("#btns button")
      btn.forEach(item => {
          item.onclick=function(){
              btn.forEach(v => {
             v.classList.remove('btn-blue')
           });
             const index=this.innerHTML
        
             option.xAxis.data=groupData[index].map(item=>{
               
              return item.name
          }),


          option.series[0].data=groupData[index].map(item=>{

            return item.hope_salary
        }),

        option.series[1].data=groupData[index].map(item=>{

            return item.salary
        }),
           this.classList.add('btn-blue')
           myChart.setOption(option);
          }
      });

}

zuyuan(groupData)

const provinceData=res.data.data.provinceData

function initMapChart(provinceData) {
    const myEchart = echarts.init(document.querySelector('#map'))
    const dataList = [
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 0 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0 },
      { name: '重庆', value: 0 },
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 0 },
      { name: '江苏', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 0 },
      { name: '湖北', value: 0 },
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 0 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 0 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 },
    ]
    
    console.log(provinceData);
    
    provinceData.forEach(item=>{
      dataList.find(v=>{
      if (item.name.indexOf(v.name)===0) {
         v.value=item.value
      }
      })
    })


    let option = {
      title: {
        text: '籍贯分布',
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 位学员',
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff',
        },
      },
      visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        bottom: '20',
        text: ['6', '0'],
        inRange: {
          color: ['#ffffff', '#0075F0'],
        },
        show: true,
        left: 40,
      },
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: 'rgba(0,0,0,0.7)',
          },
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)',
            color: '#e0ffff',
          },
          emphasis: {
            areaColor: '#34D39A',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
      series: [
        {
          name: '籍贯分布',
          type: 'map',
          geoIndex: 0,
          data: dataList,
        },
      ],
    }
    myEchart.setOption(option)
  }

  initMapChart(provinceData)

  console.log("salaryData",salaryData);






    // ---------- 男女薪资分布 ----------
    function boyGirlEchart (salaryData) {
       
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector('#gender'))
  
        // 指定图表的配置项和数据
        const option = {
          // title可以设置一个数组 给多个标题
          title: [
            {
              text: '男女薪资分布',
              top: '3%',
              left: '4%'
            },
            {
              text: '男生',
              left: 'center',
              top: '45%'
            },
            {
              text: '女生',
              left: 'center',
              top: '85%'
            }
          ],
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            show: false
          },
          color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a', 'yellowgreen'],
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['25%', '35%'],
              // 圆心的位置
              center: ['50%', '30%'],
              data: salaryData.map(itme=>{
                return {
                 value:itme.b_count,
                 name:itme.label,   
           }
           }),
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            },
            {
              name: 'Access From',
              type: 'pie',
              radius: ['25%', '35%'],
                 center: ['50%', '70%'],
              data:salaryData.map(itme=>{
                return {
                 value:itme. g_count,
                 name:itme.label,   
           }
           }),
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
  
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      }
      boyGirlEchart(salaryData)


}
